<script lang="ts" setup>
import { useUserStore } from "@/stores/user";
import { onMounted, ref } from "vue";

const userStore = useUserStore();
const username = ref("");
const password = ref("");
const usernameRef = ref();
const login = () => userStore.login(username.value, password.value);

onMounted(() => {
  usernameRef.value.focus();
});
</script>

<template>
  <div class="login-container">
    <div class="login-content">
      <div class="box-perspective">
        <div class="box-preserve-3d">
          <div class="ball-center-x"></div>
          <div class="ball-center-x-one"></div>
          <div class="ball-center-x-two"></div>
          <div class="ball-center-x-three"></div>
          <div class="ball-center-x-four"></div>
          <div class="ball-center-x-five"></div>
          <div class="ball-center-y"></div>
          <div class="ball-center-y-one"></div>
          <div class="ball-center-y-two"></div>
          <div class="ball-center-y-three"></div>
          <div class="ball-center-y-four"></div>
          <div class="ball-center-y-five"></div>
        </div>
      </div>
      <div class="login-tit">登录</div>
      <div class="login-input">
        <input ref="usernameRef" type="text" placeholder="用户名" v-model="username" />
      </div>
      <div class="login-input">
        <input type="password" placeholder="密码" v-model="password" @keydown.enter="login" />
      </div>
      <div class="login-btn">
        <ElButton type="primary" @click="login">登录</ElButton>
        <div class="login-btn-right">
          <ElCheckbox>记住密码</ElCheckbox>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@keyframes float3d {
  0% {
    top: -120px;
  }
  50% {
    top: -80px;
  }
  100% {
    top: -120px;
  }
}
.login-container {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  background-image: url("@/assets/images/background.png");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  .login-content {
    position: relative;
    animation: float3d 8s infinite linear;
    margin: 0 auto;
    box-shadow:
      0 0 10px #2890fa inset,
      0 0 30px #2890fa;
    // top: -100px;
    border: 1px solid #2890fa;
    border-radius: 5px;
    background: rgba(40, 144, 250, 0.2);
    width: 400px;
    height: 280px;
  }
  .login-tit {
    border-bottom: 1px solid #2890fa;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    background: rgba(0, 0, 0, 0.8);
    padding: 15px 20px;
    color: #fff;
    font-size: 18px;
  }
  .login-input {
    margin: 30px auto 0 auto;
    width: 90%;
  }
  .login-input input {
    border: 0;
    border-bottom: 1px solid rgba(40, 144, 250, 0.4);
    background: rgba(0, 0, 0, 0);
    width: 100%;
    height: 30px;
    color: #fff;
    line-height: 30px;
  }
  .login-input input:focus {
    outline: none;
  }
  .login-btn {
    display: flex;
    margin: 40px auto 0 auto;
    width: 90%;
    color: #ffffff;
  }
  .login-btn-right {
    display: flex;
    align-items: center;
    margin-left: 20px;
  }
  .box-perspective {
    position: absolute;
    bottom: -200px;
    left: calc((400px - 150px) / 2);
  }
}
</style>

<style lang="scss">
@use "@/assets/styles/earth.scss" as *;
</style>
